import Taro, {Component, Config} from "@tarojs/taro";
import {View, Input, Picker, Image, Text, Form, Button} from "@tarojs/components";
import {AtImagePicker} from 'taro-ui'
import {inject, observer} from '@tarojs/mobx'
import {IStoreProps} from '../../store/Stores'
import PageFooterInfo from '../../components/PageFooterInfo'

import {getRuntime,educationArr,workYearsArr} from "../../utils/common";

import './index.less'
import right from '../../assets/img/right.png'

interface IHomeProps extends IStoreProps {}

@inject("stores")
@observer
class Page1 extends Component<IHomeProps> {
  constructor(props) {
    super(props)
  }

  state = {
    registrationType : 1, // 课程类别
    certificateArr: ['投标资料员', '建企八大员', '三级项目经理'], // 培训证书
    certificate:'',
    highestEducatioArr:educationArr,
    highestEducatio: '', // 最高学历
    major: '', // 所学专业
    yearsOfWorkingArr: workYearsArr,
    yearsOfWorking: null, // 工作年限
    placeOfWork: '', // 工作单位
    unitAddress: '', // 单位地址
    contactName: '', // 联系人姓名
    contactPhone: '', // 联系人电话
    contactEmail: '', // 联系人邮箱地址
    identityCardPhotoArr: [], // 身份证照片
    identityCardPhoto: '', // 身份证照片
    graduationCertificateArr: [], // 毕业证书学位证书图片
    graduationCertificate: '', // 毕业证书学位证书图片
  }

  componentWillMount(): void {
    Taro.setNavigationBarTitle({title: '建企类'})
  }

  saveApplyInfoAsync(e) {
    console.log(e.detail.value)
    let { major,placeOfWork,unitAddress, contactName, contactPhone,contactEmail } = e.detail.value
    let { yearsOfWorking, registrationType, certificate, highestEducatio, identityCardPhoto, graduationCertificate } = this.state
    if(!certificate){
      getRuntime().showToast('培训证书不能为空~')
      return
    }
    if(!yearsOfWorking){
      getRuntime().showToast('工作年限不能为空~')
      return
    }
    if(!contactName){
      getRuntime().showToast('联系人姓名不能为空~')
      return
    }
    if(!contactPhone){
      getRuntime().showToast('联系人电话不能为空~')
      return
    }
    let businessSchool = this.props.stores.BusinessSchool
    businessSchool.saveApplyInfoAsync( {
      form: {
        registrationType,
        certificate: certificate,
        highestEducatio: highestEducatio,
        major,
        yearsOfWorking,
        placeOfWork,
        unitAddress,
        identityCardPhoto: identityCardPhoto,
        graduationCertificate: graduationCertificate,
        contactName,
        contactPhone,
        contactEmail,
        id:0
      },
      callback: () => {
        this.handelRouter('/pages/other/submit_success')
      }
    })
  }
  handelRouter(url: string = '/pages/index/index'): void {
    getRuntime().navigateTo(url)
  }

  changeImgI(e){
    this.setState({
      identityCardPhotoArr:e
    }, () =>{
      getRuntime().uploadFile(e, (res) => {
        this.setState({
          identityCardPhoto: res.join(',')
        })
      })
    })
  }
  changeImgG(e){
    this.setState({
      graduationCertificateArr:e
    },() => {
      getRuntime().uploadFile(e, (res) => {
        this.setState({
          graduationCertificate: res.join(',')
        })
      })
    })
  }

  changePicker(type: string,e) {
    this.setState({
      [type]: this.state[[type]+'Arr'][e.detail.value]
    })
  }
  render() {
    let { certificateArr, certificate,  highestEducatioArr, highestEducatio, identityCardPhotoArr,
      graduationCertificateArr,yearsOfWorkingArr,yearsOfWorking } = this.state
    return (
      <View className='from-wrap'>
        <Form onSubmit={this.saveApplyInfoAsync.bind(this)}>
        <View className='item-group pt0 pb0'>
          <View className='input-group '>
            <View className='input-name is-require'>培训证书</View>
            <Picker className='input-picker' mode='selector' name='certificate' range={certificateArr} onChange={this.changePicker.bind(this,'certificate')}>
              <View className='tt'>
                {!certificate&& <View className='from-input picker-con placeholder-class' >请选择</View>}
                {certificate&& <View className='from-input picker-con' >{certificate}</View>}
                <Image className='drop-down-icon' src={right}/>
              </View>
            </Picker>
          </View>
          <View className='input-group '>
            <View className='input-name is-require'>最高学历</View>
            <Picker className='input-picker' mode='selector' range={highestEducatioArr} onChange={this.changePicker.bind(this,'highestEducatio')}>
              <View className='tt'>
                {!highestEducatio&& <View className='from-input picker-con placeholder-class' >请选择</View>}
                {highestEducatio&& <View className='from-input picker-con' >{highestEducatio}</View>}
                <Image className='drop-down-icon' src={right} />
              </View>
            </Picker>
          </View>
          <View className='input-group'>
            <View className='input-name'>所学专业</View>
            <Input className='from-input' placeholderClass='placeholder_class' placeholder='请填写所学专业' name='major'/>
          </View>
          <View className='input-group '>
            <View className='input-name'>工作年限</View>
            {/*<Input className='from-input' placeholderClass='placeholder_class' placeholder='请填写工作年限' name='yearsOfWorking' />*/}
            <Picker className='input-picker' mode='selector' range={yearsOfWorkingArr} onChange={this.changePicker.bind(this,'yearsOfWorking')}>
              <View className='tt'>
                {!yearsOfWorking&& <View className='from-input picker-con placeholder-class' >请选择</View>}
                {yearsOfWorking&& <View className='from-input picker-con' >{yearsOfWorking}年</View>}
                <Image className='drop-down-icon' src={right} />
              </View>
            </Picker>
          </View>
          <View className='input-group'>
            <View className='input-name'>工作单位</View>
            <Input className='from-input' placeholderClass='placeholder_class' placeholder='请填写工作单位' name='placeOfWork'/>
          </View>
          <View className='input-group'>
            <View className='input-name'>单位地址</View>
            <Input className='from-input' placeholderClass='placeholder_class' placeholder='请填写单位地址' name='unitAddress'/>
          </View>
          <View className='input-group input-upload'>
            <View className='input-name'>上传法人身份证正反面</View>
            <AtImagePicker
              length={4}
              count={2}
              showAddBtn={true}
              files={identityCardPhotoArr}
              onChange={this.changeImgI.bind(this)}
            />
          </View>
          <View className='input-group input-upload'>
            <View className='input-name'>上传毕业证和学位证</View>
            <AtImagePicker
              length={4}
              count={2}
              showAddBtn={true}
              files={graduationCertificateArr}
              onChange={this.changeImgG.bind(this)}
            />
          </View>
        </View>

        <View className='item-group pt0 pb0'>
          <View className='input-group'>
            <View className='input-name is-require'>联系人</View>
            <Input className='from-input' placeholderClass='placeholder_class' placeholder='请填写联系人' name='contactName'/>
          </View>

          <View className='input-group'>
            <View className='input-name is-require'>联系电话</View>
            <Input className='from-input' type={"number"} maxLength={11} placeholderClass='placeholder_class' placeholder='请填写联系电话' name='contactPhone'/>
          </View>

          <View className='input-group'>
            <View className='input-name'>联系邮箱</View>
            <Input className='from-input' placeholderClass='placeholder_class' placeholder='请填写联系邮箱' name='contactEmail'/>
          </View>
        </View>

        <Button className='page-submit' formType={"submit"}>立即报名</Button>
        </Form>
        <PageFooterInfo />
      </View>
    )
  }
}

export default Page1
